<template>
    <div>
        <Card :padding="0" class="public-area2">
            <p slot="title" style="font-weight:400">
                公区
            </p>
            <div slot="extra">
                <span v-if="currRoom && currRoom.lease" style="margin-right:10px">{{ tenantInfo }}</span>
                <!-- 公区只有整租并且房间没有租约才显示入住按钮 -->
                <Button type="primary" size="small" style="padding: 4px 12px;" v-if="this.home && this.home.lease_type === 2 && this.room && !this.room.lease" @click="setCheckInVisible(true)">租客入住+</Button>
                <Button type="primary" size="small" style="padding: 4px 12px;" @click="openRoom">管理</Button>
            </div>

            <Row class="list-item">
                <Col span="8">网关: {{ gateway }}</Col>
                <Col span="8" class="text-center red">离线: {{ gatewayOffline }}</Col>
            </Row>

            <Row class="list-item">
                <Col span="8">采集器: {{ elecollector }}</Col>
                <Col span="8" class="text-center red">离线: {{ elecollectorOffline }}</Col>
            </Row>

            <Row class="list-item">
                <Col span="8">水表网关: {{ watergateway }}</Col>
                <Col span="8" class="text-center red">离线: {{ watergatewayOffline }}</Col>
            </Row>

            <Row class="list-item">
                <Col span="8">门锁: {{ lock }}</Col>
                <Col span="8" class="text-center red">离线: {{ lockOffline }}</Col>
                <Col span="8" class="text-right red">低电: {{ lockLowPower }}</Col>
            </Row>

            <Row class="list-item">
                <Col span="8">电表: {{ elemeter }}</Col>
                <Col span="8" class="text-center red">离线: {{ elemeterOffline }}</Col>
                <Col span="8" class="text-right red">断电: {{ elemeterStop }}</Col>
            </Row>

            <Row class="list-item">
                <Col span="8">水表: {{ watermeter }}</Col>
                <Col span="8" class="text-center red">离线: {{ watermeterOffline }}</Col>
                <!-- <Col span="8" class="text-right red">断水: {{ watermeterStop }}</Col> -->
            </Row>

            <Row class="list-item">
                <Col span="8">门禁: {{ accessControl }}</Col>
                <Col span="8" class="text-center red">离线: {{ accessControlOffline }}</Col>
            </Row>
        </Card>

         <!-- 入住 -->
        <renterCheckIn
            :homeAddress="home.city + home.district + home.address"
            :room="currRoom"
            v-if="isCheckInModalVisible"
            @cancelCheckIn="setCheckInVisible(false)"
            @checkInSuccess="checkInSuccess"/>
    </div>
</template>

<script>
// import util from '@/libs/util';
import { http, api } from '@/libs/http'
import { DeviceTypeEnum, NetState } from '@/libs/const'
import renterCheckIn from '../renter/renterCheckIn.vue'
export default {
  name: 'publicAreaCard2',
  props: {
    room: Object,
    home: Object
  },
  components: {
    renterCheckIn
  },
  data () {
    return {
      gateway: 0,
      gatewayOffline: 0,

      elecollector: 0,
      elecollectorOffline: 0,

      watergateway: 0,
      watergatewayOffline: 0,

      lock: 0,
      lockOffline: 0,
      lockLowPower: 0,

      elemeter: 0,
      elemeterOffline: 0,
      elemeterStop: 0,

      watermeter: 0,
      watermeterOffline: 0,
      watermeterStop: 0,

      accessControl: 0,
      accessControlOffline: 0,

      currRoom: null,

      isCheckInModalVisible: false
    }
  },

  mounted () {
    if (this.room.leases && this.room.leases[0]) {
      this.room.lease = this.room.leases[0]
    }
    this.currRoom = this.room
    this.room.devices.forEach(item => {
      switch (item.device_type) {
        case DeviceTypeEnum.GATEWAY:
          this.gateway++
          if (item.online === NetState.OFFLINE) {
            this.gatewayOffline++
          }
          break

        case DeviceTypeEnum.ELECOLLECTOR:
          this.elecollector++
          if (item.online === NetState.OFFLINE) {
            this.elecollectorOffline++
          }
          break

        case DeviceTypeEnum.WATERGATEWAY:
          this.watergateway++
          if (item.online === NetState.OFFLINE) {
            this.watergatewayOffline++
          }
          break

        case DeviceTypeEnum.LOCK:
          this.lock++
          if (item.online === NetState.OFFLINE) {
            this.lockOffline++
          }
          if (item.low_power) {
            this.lockLowPower++
          }
          break

        case DeviceTypeEnum.ELEMETER:
          this.elemeter++
          if (item.online === NetState.OFFLINE) {
            this.elemeterOffline++
          }
          if (item.power < 10) {
            this.elemeterStop++
          }
          break

        case DeviceTypeEnum.WATERMETER_COLD:
        case DeviceTypeEnum.WATERMETER_HOT:
          this.watermeter++
          if (item.online === NetState.OFFLINE) {
            this.watermeterOffline++
          }
          if (item.power < 10) {
            this.watermeterStop++
          }
          break
      }
    })
  },

  computed: {
    // devices() {
    //     util.log('publicAreaCard1 this.room:', this.room);
    //     return this.room.devices;
    // },
    refreshRoom () {
      return this.$store.state.room.refresh_room
    },

    isShowRenterEnterIn () { // 是否展示租客入住按钮
      return !!((this.home && this.home.lease_type === 2 && this.room && !this.room.lease)) // 公区只有整租并且房间没有租约才显示入住按钮
    },
    tenantInfo () {
      let room = this.currRoom
      let info = room && room.lease && room.lease.tenant ? room.lease.tenant.name + ' ' + room.lease.tenant.phone : ''
      return info
    }
  },
  watch: {
    refreshRoom () {
      http.request(this, api.room_info, [this.room.id], null, (res, err) => {
        if (err || !res) {
          return
        }

        this.currRoom = res
        this.gateway = 0
        this.elecollector = 0
        this.watergateway = 0
        this.lock = 0
        this.elemeter = 0
        this.watermeter = 0
        res.devices.forEach(item => {
          switch (item.device_type) {
            case DeviceTypeEnum.GATEWAY:
              this.gateway++
              if (item.online === NetState.OFFLINE) {
                this.gatewayOffline++
              }
              break

            case DeviceTypeEnum.ELECOLLECTOR:
              this.elecollector++
              if (item.online === NetState.OFFLINE) {
                this.elecollectorOffline++
              }
              break

            case DeviceTypeEnum.WATERGATEWAY:
              this.watergateway++
              if (item.online === NetState.OFFLINE) {
                this.watergatewayOffline++
              }
              break

            case DeviceTypeEnum.LOCK:
              this.lock++
              if (item.online === NetState.OFFLINE) {
                this.lockOffline++
              }
              if (item.power < 10) {
                this.lockLowPower++
              }
              break

            case DeviceTypeEnum.ELEMETER:
              this.elemeter++
              if (item.online === NetState.OFFLINE) {
                this.elemeterOffline++
              }
              if (item.power < 10) {
                this.elemeterStop++
              }
              break

            case DeviceTypeEnum.WATERMETER_COLD:
            case DeviceTypeEnum.WATERMETER_HOT:
              this.watermeter++
              if (item.online === NetState.OFFLINE) {
                this.watermeterOffline++
              }
              if (item.power < 10) {
                this.watermeterStop++
              }
              break
          }
        })
      })
    }
  },
  methods: {
    openRoom () {
      if (this.currRoom) {
        this.$emit('on-open-room', this.currRoom)
      }
    },

    setCheckInVisible (v) {
      this.isCheckInModalVisible = v
    },

    checkInSuccess () {
      this.setCheckInVisible(false)
      // 刷新房源房间列表
      this.$store.commit('setWillRefreshHome', {
        homeId: this.room.home_id,
        roomId: this.room.id
      })
    }
  }
}
</script>

<style lang="less" scoped>
.public-area2 {
    background: #fff !important;
    border: 1px solid #dddee1;
    &-devices {
        display: flex;
        flex-flow: wrap;
    }
    &-device {
        width: 25%;
        text-align: center;
    }
}
.list-item {
    border-bottom: 1px dashed #ddd;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    text-align: left;
    margin: 0 20px;
}
.list-item:last-child {
    border-bottom: none;
}
.red {
    color: #ff4d4d;
}
.text-center {
    text-align: left;
    padding-left: 20px;
}
.text-right {
    text-align: left;
    padding-left: 30px;
}
</style>


